// export default () => <div>Tree123</div>

import { defineComponent, ref } from 'vue'

/*
export default defineComponent({
  name: 'Tree',
  render() {
    return <div>选项式tsx</div>
  }
})*/

const Child = defineComponent({
  setup(_props, { slots }) {
    return () => (
      <>
        默认插槽：{slots.default && slots.default()}
        <br />
        具名插槽：{slots.prefix && slots.prefix()}
        <br />
        作用域插槽：{slots.suffix && slots.suffix({ name: 'Tom' })}
      </>
    )
  }
})


export default defineComponent({
  name: 'TreeTree',
  setup() {
    const count = ref(0)
    return () => (
      <>
        <div>
          <Child v-slots={{
            prefix: () => <i>具名插槽</i>,
            suffix: (props: Record<'name', string>) => <span>{props.name}</span>
          }}>
            <span>默认插槽</span>
          </Child>
        </div>
        <div>组合式tsx, {count.value}</div>
        <input type="text" v-model={count.value} />
      </>
    )
  }
})